<template>
	<view class="fill-width-height pagecontent flex-col" :class="$thatThemeClassName">
		<view class="search fill-width">
			<uv-search 
				placeholder="请输入搜索内容" 
				v-model="searchValue"
				@search="search" 
				bgColor="white"
			>
			</uv-search>
			<TypeMenu 
				v-if="typeList?.length > 0" 
				:typeList="typeList" 
				v-model="typeId" 
				@itemClick="search()"
			/>
		</view>
		<scroll-view 
			v-if="tableDataList.length > 0" 
			class="flex-1 overflow-hidden"
			scroll-y 
			lower-threshold="20" 
			@scrolltolower="handleScroll"
		>
			<uv-cell-group class="cell-group_contant" ref="scrollContainer" >
				<uv-grid :col="2" class="fill-width" style="min-height: 20vw;">
					<uv-grid-item 
						v-for="(item,index) in tableDataList" 
						:key="index"
						:customStyle="{padding: '6px'}"
						@click="viewsDetails(item)"
					 >
						<view class="fill-width imgItemView" style="position: relative;">
							<uv-image
								:mode="imageMode" 
								radius="10" 
								width="100%" 
								height="120"
								:lazy-load="true"
								:observeLazyLoad="true"
								:fade="true"
								:duration="450"
								:showMenuByLongpress="false"
								:src="getImgPath(item)"
								class="imgageItem"
							>
								<template v-slot:loading>
									<uv-loading-icon color="#999"></uv-loading-icon>
								</template>
							</uv-image>
							<view class="img_name d-flex justify-center align-center text-overflow-hidden">
								{{ item.collname }}
							</view>
						</view>
					</uv-grid-item>
				</uv-grid>
				<uv-load-more 
					:status="status" 
					:loading-text="'努力加载中'"
					:loadmore-text="'轻轻上拉'"
					:nomore-text="'实在没有了'"
				/>
			</uv-cell-group>
		</scroll-view>
		<view class="flex-1" v-else>
			<uv-empty 
				mode="search"
				con="https://cdn.uviewui.com/uview/empty/car.png"
			></uv-empty>
		</view>
	</view>
</template>

<script>
	import { getCollectPage } from '@/api/collection'
	import { search,getTypeList } from '@/api/list/search'
	import { listToTree } from '@/framework/utils'
	import sharePages from '@/framework/plugins/sharePages'
	import TypeMenu from  '@/components/typeMenu'
	export default {
		components: {
			TypeMenu
		},
		mixins: [sharePages],
		data() {
			return {
				searchValue: '',
				status: 'loadmore',
				tableDataList: [],
				total: 0,
				queryParams: {
					pageNum: 1,
					pageSize: 30,
				},
				allObj: { id:'all', name: '全部' },
				typeId: 'all',
				typeList: []
			}
		},
		computed: {
			imageMode(){
				return this.$config.imgageMode || 'widthFix'
			}
		},
		methods: {
			search(){
				this.tableDataList = []
				this.getPage()
			},
			getPage(){
				this.status = 'loading'
				let typeId = this.typeId
				const searchParams = {
					...this.queryParams,
					searchValue: this.searchValue,
					alltypeid: typeId,
				}
				getCollectPage(searchParams).then(res => {
					this.tableDataList.push(...res.rows)
					this.total = res.total
					if(this.queryParams.pageNum <= this.totalPages){
						this.status = 'loadmore'
					} else {
						this.status = 'nomore'
					}
				})
			},
			async getTypeList() {
				let typeList = await getTypeList({bustype: 'coll'}).then((res) => res.data)
				typeList.unshift(this.allObj)
				// typeList = typeList.filter(item => item)
				typeList.forEach((item) => {
					item.label = item.name
					item.value = item.id
				})
				const treeList = listToTree(typeList, 'id', 'parentid')
				treeList?.forEach((item) => {
					if (item?.children?.length === 0) {
						delete item.children
					}
				})
				this.typeList = treeList
			},
			getImgPath(item){
				if(item?.coverurl?.startsWith('http')){
					return item.coverurl
				}
				return this.$config.replacehUrl(`imgStore/openApi/viewFile?fileName=${item.coverurl}`)
			},
			goToPage(url){
				uni.navigateTo({
				  url: url 
				});
			},
			viewsDetails(item){
				this.goToPage(`/pages/collection/collectDetailList/index?id=${item.id}&type=collection`)
			},
			handleScroll(event) {
				const scrollContainer = this.$refs.scrollContainer;
				if (!scrollContainer) {
				  return
				}
				const { scrollTop, scrollHeight, clientHeight } = scrollContainer?.$el;
				// 当滚动到底部时触发查询
				const isBottom = scrollTop + clientHeight >= scrollHeight - 5
				const isFlag = this.status !== 'nomore' && this.queryParams.pageNum <= this.totalPages
				if (isBottom && isFlag) {
					this.queryParams.pageNum++;
					this.getTablePage();
				}
			},
		},
		async onLoad(){
			this.tableDataList = []
			await this.getTypeList()
			await this.getPage()
		}
	}
</script>

<style scoped lang="scss">
	.search {
		:deep(.uv-search__action--active) {
			padding: 6px;
			border-radius: 5px;
			background: #377ff5;
			color: white;
			margin: 0;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
		:deep(.uv-search){
			padding: 10px;
		}
		:deep(.uv-search__content) {
			margin: 0;
			// border-top-right-radius: 0 !important;
			// border-bottom-right-radius: 0 !important;
		}
		:deep(.uv-search__action.uv-search__action--active){
			display: none;
		}
	}
	.img_name{
		width: 100%;
		height: 46px;
		position: absolute;
		bottom: 0;
		border-bottom-left-radius: 11px;
		border-bottom-right-radius: 11px;
		color: #e7e7e7;
		cursor: pointer;
		opacity: 0.95;
		font-size: 0.9rem;
		height: 10vw !important;
		background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .88)));
		background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .95) 100%); 
	}
	.imgageItem :deep(.uv-image .uv-image__image > div){
		filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
	}
	.imgItemView{
		min-height: 17vw;
		background: #e9e9e9;
		border-radius: 10px;
	}
	.cell-group_contant{
		height: 100%;
		:deep(.uv-cell-group__wrapper,.uv-grid) {
			height: 100%;
		}
	}
</style>
